import React,{useEffect, useState} from 'react'
import {useNavigate,Outlet} from 'react-router-dom'
import { ShareSheet } from 'react-vant'
import './dong.css'
export default function Dong() {
  let arr = JSON.parse(sessionStorage.getItem('data'))||'[]'
  const [flag,setflag]=useState(false)
  const [flag1,setflag1]=useState(false)
  const [flag2,setflag2]=useState(false)
  const [visible, setVisible] = useState(false)
  useEffect(()=>{
    dianyi()
  },[])

  const options = [
    [
      { name: '微信', icon: 'wechat' },
      { name: '朋友圈', icon: 'wechat-moments' },
      { name: '微博', icon: 'weibo' },
      { name: 'QQ', icon: 'qq' },
    ],
    [
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
      { name: '小程序码', icon: 'weapp-qrcode' },
    ],
  ]
  const navigate = useNavigate();
  const dianyi=()=>{
    navigate('/app/my/dong/tai')
    setflag(true)
    setflag1(false)
    setflag2(false)
  }
  const dianer=()=>{
    navigate('/app/my/dong/qunliao')
    setflag(false)
    setflag1(true)
    setflag2(false)
  }
  const diansan=()=>{
    navigate('/app/my/dong/yiqi')
    setflag(false)
    setflag1(false)
    setflag2(true)
  }
  return (
    <div>
        <div className='d-head'>
              <span onClick={()=>{navigate('/app/my')}}><img src={require('../My/img/返回1.png')}></img></span>
              <div className='d-cha'>
              <span ><img src={require('../My/img/放大镜-白色.png')}></img></span>
              <span onClick={() => setVisible(true)}><img src={require('../My/img/更多.png')}></img></span>
              </div>
        </div>  
        <div className='d-tou'>
          <div className='touxi'>
            <img src={require('../My/img/头像.png')}></img>
          </div>
          <div className='top-bottom'>
          <div className="box">
                    <div>97</div>
                    <br />
                    <div className="zhu" onClick={()=>{navigate('/app/my/guan')}}>关注</div>
                  </div>
                  <div className="box">
                    <div>200</div>
                    <br />
                    <div
                      className="zhu"
                      onClick={() => {
                        navigate("/app/my/fans");
                      }}
                    >
                      粉丝
                    </div>
                  </div>
                  <div className="box">
                    <div>500</div>
                    <br />
                    <div
                      className="zhu"
                      onClick={() => {
                        navigate("/guan");
                      }}
                    >
                      被赞
                    </div>
                  </div>
          </div>
        </div>
        <div className='dn'>
        <div className='d-name'>
          <p>{arr.usedata[0].usename}</p>
        </div>
        <div className='dn-xin'>
          个人资料
        </div>
        </div>
        <div className='d-main'>
          <span onClick={()=>{dianyi()}} className={flag?'sp_b':''}>动态</span>
          <span onClick={()=>{dianer()}} className={flag1?'sp_b1':''}>群聊</span>
          <span onClick={()=>{diansan()}} className={flag2?'sp_b2':''}>一起跑</span>
         
        </div>
        <div className='d-nei'>
            <Outlet></Outlet>
          </div>
          <div>
          <ShareSheet
        visible={visible}
        options={options}
        title='立即分享给好友'
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          console.log('option', option)
          console.log('index', index)
          setVisible(false)
        }}
      />
          </div>
    </div>
  )
}
